<template>
  <!-- 上架作业 -->
  <div id="PackingMarking">
    <root name="PackingMarking">
      <SafeHeader
        v-bind="{
          title: '装箱打标',
          isBack: true,
          fixedTop: true,
        }"
      />
      <div>
        <v-container>
          <v-card outlined class="py-4">
            <v-row class="ma-0 mb-4">
              <v-col class="py-1">
                <v-text-field
                  :prepend-icon="mdiCreditCardScan"
                  clearable
                  class="my-0 inputPlaceholder"
                  @keydown.13="scanGenerateCode"
                  dense
                  hide-details
                  v-model="scanInfo"
                  placeholder="请扫描收货标签"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-0 mb-3">
              <v-col class="py-0">
                <v-text-field
                  label="物料"
                  dense
                  required
                  readonly
                  hide-details
                  v-model="formData.itemCode"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-0 mb-3">
              <v-col class="py-0">
                <v-text-field
                  label="批次"
                  dense
                  readonly
                  v-model="formData.batchName"
                  hide-details
                ></v-text-field>
              </v-col>
            </v-row>

            <v-row class="ma-0 mb-3">
              <v-col
                cols="8"
                class="py-0 d-flex align-center font-weight-bold"
                style="font-size: 15px"
              >
                <v-text-field
                  label="箱码"
                  dense
                  hide-details
                  placeholder="可扫码或生成"
                  v-model="formData.boxCode"
                >
                  <template v-slot:append>
                    <v-btn
                      rounded
                      outlined
                      small
                      @click="generateBoxCode"
                      color="#193690"
                    >生成</v-btn
                    ></template
                  >
                </v-text-field>
              </v-col>
              <v-col
                cols="4"
                class="py-0 d-flex align-center font-weight-bold"
                style="font-size: 15px"
              >
                <v-text-field
                  label="箱内数量"
                  class="inputPlaceholder"
                  dense
                  hide-details
                  type="number"
                  v-model="formData.qty"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-0">
              <v-col
                cols="12"
                class="
                  py-0
                  mt-2
                  d-flex
                  align-center
                  justify-center
                  font-weight-bold
                "
                style="font-size: 15px"
              ><v-btn
                color="#627AEC"
                dark
                style="width: 60%; margin-top: 10px; border-radius: 12px"
              ><span
                style="color: #fff; font-size: 15px"
                class="font-weight-bold"
                @click="save"
              >保存</span
              ></v-btn
              ></v-col
              >
            </v-row>
          </v-card>
        </v-container>
        <v-container class="task_list mb-15 white">
          <v-row>
            <v-col
              cols="12"
              class="card-title"
              style="padding-bottom: 8px; padding-top: 8px"
            >装箱列表</v-col
            >
          </v-row>
          <v-divider class="mb-2"></v-divider>
          <div v-if="ctInfoList[0]">
            <v-container v-for="(item, index) in ctInfoList" :key="index">
              <v-row>
                <v-col cols="12" class="pa-0 pb-2">
                  <v-card outlined style="background-color: #f2f3f5">
                    <v-card-subtitle>
                      <v-row
                        class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                      >
                        <v-col cols="4" class="py-1 card-lable">容器号</v-col>
                        <v-col class="py-1 card-value">{{
                          item.boxCode
                          }}</v-col>
                      </v-row>
                      <v-row
                        class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                      >
                        <v-col cols="4" class="py-1 card-lable px-2"
                        >物料编码</v-col
                        >
                        <v-col class="py-1 card-value px-2">{{
                          item.itemCode
                          }}</v-col>
                      </v-row>
                      <v-row
                        class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                      >
                        <v-col cols="4" class="py-1 card-lable">批次号</v-col>
                        <v-col class="py-1 card-value">{{
                          item.batchName
                          }}</v-col>
                      </v-row>
                      <v-row
                        class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                      >
                        <v-col cols="4" class="py-1 card-lable">数量</v-col>
                        <v-col class="py-1 card-value">{{ item.qty }}</v-col>
                      </v-row>
                    </v-card-subtitle>
                  </v-card>
                </v-col>
              </v-row>
            </v-container>
          </div>
          <v-row v-else>
            <v-col cols="12" class="text-center">暂无数据</v-col>
          </v-row>
        </v-container>

        <div v-show="hidshow" class="footer">
          <v-bottom-navigation>
            <v-row class="ma-0 pa-2">
              <v-col
                cols="4"
                class="pa-4 d-flex align-center"
                style="font-size: 15px"
              >
                合计：<span style="color: #f8a73c"
              >{{ ctInfoList.length }}
                </span>
                <span> 箱</span>
              </v-col>
              <v-col class="pa-0">
                <v-btn
                  block
                  color="#193690"
                  dark
                  style="height: 100%; border-radius: 8px"
                ><span
                  style="color: #fff; font-size: 15px"
                  class="font-weight-bold"
                  @click="submit"
                >提交</span
                ></v-btn
                >
              </v-col>
            </v-row>
          </v-bottom-navigation>
        </div>
      </div>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
  import Root from "@/components/Root.vue";
  import SafeHeader from "../../components/safeHeader_wms";
  import { mdiCreditCardScan } from "@mdi/js";
  import _ from "lodash";
  import { printToJiaBo } from "@/static/print";
  // import Message from "@/components/message_box_wms/index";
  // import Storage from "@/utils/storage.js";
  import wms from "@/utils/business_wms";
  // import { apiList } from "@/static/apiList";
  export default {
    name: "PackingMarking",
    components: {
      SafeHeader,
      Root,
    },
    data() {
      return {
        docmHeight: document.documentElement.clientHeight,
        showHeight: document.documentElement.clientHeight,
        hidshow: true,
        overlay: false,
        valid: false,
        mdiCreditCardScan: mdiCreditCardScan,
        loading: false,
        scanInfo: "",
        formData: {
          itemCode: "",
          batchName: "",
          boxCode: "",
          qty: "",
        },
        acceptRecordCode: "", //收货单号, 暂不使用
        ctItemNum: "", //收货单的数据, 暂不使用
        ctNum: "1", //每次生成一个
        ctInfoList: [],
      };
    },
    methods: {
      // 收货标签扫码回车处理
      scanGenerateCode() {
        //首先判断是否有数据
        if (this.formData.itemCode) {
          alert("已存在数据");
          return false;
        }

        let scanData = this.scanInfo.split("---");
        this.acceptRecordCode = scanData[0];
        this.formData.itemCode = scanData[1];
        this.formData.itemName = scanData[2];
        this.formData.batchName = scanData[3];
        // this.ctItemNum = scanData[4];
      },

      // 保存绑定容器的数据，放入数组
      save() {
        //校验数据是否齐备
        if (
          !this.formData.itemCode ||
          !this.formData.boxCode ||
          !this.formData.qty
        ) {
          alert("请确认数据是否完整");
          return false;
        }
        //TODO:校验数量是否超过

        this.ctInfoList.push({
          boxCode: this.formData.boxCode,
          itemCode: this.formData.itemCode,
          itemName: this.formData.itemName,
          batchName: this.formData.batchName,
          qty: this.formData.qty,
        });

        //清空数据
        this.formData.boxCode = "";
        // this.formData.qty = "";
      },

      //生成容器码
      generateBoxCode() {
        //校验是否已经录入数据
        if (!this.formData.itemCode) {
          return false;
        }
        this.overlay = true;
        wms
          .get({ url: "/box/infos/generate", data: { count: this.ctNum } })
          .then((res) => {
            if (res.status == 200 && res.data.code == 200) {
              let ctBoxList = res.data.data;
              // console.log(JSON.stringify(ctBoxList));
              this.formData.boxCode = ctBoxList[0];
              this.overlay = false;
            } else {
              this.overlay = false;
            }
          });
      },

      //提交数据
      submit() {
        if (this.ctInfoList.length == 0) {
          alert("无数据");
          return false;
        }
        this.overlay = true;
        let packBoxData = {
          acceptRecordCode: this.acceptRecordCode,
          list: this.ctInfoList,
        };
        wms
          .post({ url: "/transfer/create/pack/box", data: packBoxData })
          .then((res) => {
            if (res.status == 200 && res.data.code == 200) {
              // console.log(JSON.stringify(res.data));
              // console.log(JSON.stringify(this.ctInfoList));
              this.overlay = false;
              //调用打印机打印
              for (let i = 0; i < this.ctInfoList.length; i++) {
                printToJiaBo(
                  this.ctInfoList[i].itemCode,
                  this.ctInfoList[i].itemName,
                  this.ctInfoList[i].batchName,
                  this.ctInfoList[i].qty,
                  this.ctInfoList[i].boxCode
                );
              }
              //刷新页面
              window.location.reload();
            }
          });
      },
    },

    mounted() {
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })();
      };
    },

    watch: {
      showHeight: function () {
        if (this.docmHeight > this.showHeight) {
          this.hidshow = false;
        } else {
          this.hidshow = true;
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .footer {
    position: absolute;
    padding-top: 65px;
    width: 100%;
    bottom: 0;
  }
</style>

<style lang="sass" scoped>
  .scanContainer
    >.row
      margin: 0
      padding: 10px

  .PackingMarking_table
    ::v-deep .v-data-table__mobile-table-row
      margin: 4px 8px
      background-color: #e8e8e8f1
    ::v-deep .v-data-table__mobile-row
      min-height: 28px !important
      // 暂无数据的显示
      ::v-deep .v-data-table__empty-wrapper
        display: flex
        justify-content: center
        align-items: center
        td
          line-height: 48px

  .inputPlaceholder
    ::v-deep.v-text-field__slot
      input::-webkit-input-placeholder
        font-size: 15px
      input::-moz-placeholder
        font-size: 15px
      input:-moz-placeholder
        font-size: 15px
      input:-ms-input-placeholder
        font-size: 15px
</style>
